<template>
	<view class="uiwu">
		<view style="height: 94rpx;">
			<view class="uiwu-scroll">
				<scroll-view scroll-x>
					<view class="uiwu-scroll-list uiwu-flex-align">
						<view v-for="(item, index) in menuTablist" class="item"
							:class="index == activeIndex ? 'active' : ''" :key="index" @click="swiperTap(item, index)">
							{{ item }}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<uiwu-list loading="noMore">
			<view class="uiwu-list flex flex-col items-center">
				<view class="uiwu-list-item uiwu-flex-align" style="height: 85px; width: 336px;"
					v-for="(item, index) in listData" :key="index">
					<view class="left uiwu-flex-column uiwu-flex-center">
						<text>+{{ item.coupon_price }}{{ app.coin_name }}</text>
						<!-- <text>{{ app.coin_name }}</text> -->
					</view>
					<view class="right">
						<view class="title" style="color: white;">{{ item.coupon_title }}</view>
						<view class="tips" style="color: white;">单次充值满{{ item.use_min_price }}元可使用</view>
						<view class="tips" style="color: white;">有效期至: {{ uiwu.formatTimestamp(item.end_time * 1000) }}
						</view>
						<!-- <view v-if="item.status == 0" class="btn uiwu-flex-center" @tap="openWindow">去使用</view> -->
					</view>
				</view>
			</view>
		</uiwu-list>
	</view>
</template>

<script setup lang="ts">
import { couponscount, couponslist, uiwu } from '@/api/interface/interface';
import { configStore } from '@/store/configStore';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { ref, inject } from 'vue';
const menuTablist = ref<Array<string>>(['可使用(0)', '已使用(0)', '已过期(0)']);
const activeIndex = ref<number>(0);
const listData = ref<Array<object>>([]);
const pageNum = ref<number>(1);
const more = ref<string>('loading');
const { app } = configStore();
const isLock = ref<boolean>(true)
const swiperTap = (item: object, index: number): void => {
	activeIndex.value = index
	getcouponslist()
}
const getcouponscount = async () => {
	const { data } = await couponscount();
	menuTablist.value[0] = `可使用(${data.usable_num})`
	menuTablist.value[1] = `已使用(${data.used_num})`
	menuTablist.value[2] = `已过期(${data.expire_num})`
}
const getcouponslist = async (mack: boolean = false): Promise<any> => {
	if (!mack) pageNum.value = 1
	const { data: { data, total } } = await couponslist({
		page: pageNum.value,
		status: activeIndex.value
	});
	isLock.value = true
	uiwu.setlist({
		isMore: mack,
		listData,
		total,
		listRow: data,
		more,
		pageNum
	})
}
const openWindow = () => {
	uni.navigateTo({
		url: '/pages/index/index'
	})
}
onReachBottom(() => {
	if (!isLock.value) return
	isLock.value = false
	pageNum.value++
	getcouponslist(true)
})
onLoad(() => {
	getcouponscount()
	getcouponslist()
})
</script>

<style lang="scss">
.uiwu-scroll {
	background-color: #272323;
	width: 100%;
	height: 94rpx;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	/* #ifdef H5 */
	//top: 44px;
	/* #endif */
	z-index: 90;

	&-list {
		//padding: 34rpx;
		height: 94rpx;
		justify-content: space-between;

		.item {
			flex-shrink: 0;
			font-size: 28rpx;
			font-weight: 500;
			color: #FFFFFF;
			height: 55rpx;
			line-height: 55rpx;

			&.active {
				text-align: center;
				width: 176rpx;
				//background: url('@/static/image/indextab.png') no-repeat 0 0;
				//background-size: 100% 100%;
				font-size: 32rpx;
				font-family: PingFang SC-Heavy, PingFang SC;
				font-weight: 800;
				color: #FFFFFF;
				line-height: inherit;
				text-shadow: 0px 4rpx 0rpx #231815;
			}
		}
	}
}

.uiwu-list {
	padding: 0 24rpx;

	&-item {
		width: 100%;
		height: 210rpx;
		background: url('@/static/image/keshiyon.png') no-repeat 0 0;
		background-size: 100% 100%;
		margin-top: 24rpx;

		// &.active {
		// 	background-image: url('../../static/yishiyongcopbg.png');

		// 	.left {
		// 		text {
		// 			color: #231815;
		// 		}
		// 	}
		// }

		.left {
			width: 190rpx;
			height: 100%;

			text {
				color: #FFF;

				&:nth-child(1) {
					font-size: 24rpx;
					font-weight: 500;
					margin-top: 40px;
				}

				// &:nth-child(2) {
				// 	font-size: 24rpx;
				// 	font-weight: 400;
				// }
			}
		}

		.right {
			flex: 1;
			height: 100%;
			position: relative;
			//padding-left: 24rpx;

			// &.active {
			// 	background: url('../../static/yishiyong.png') no-repeat 95% 0;
			// 	background-size: 120rpx 120rpx;
			// }

			// &.guoqi {
			// 	background: url('../../static/yiguoqi.png') no-repeat 95% 0;
			// 	background-size: 120rpx 120rpx;
			// }

			.title {
				font-size: 28rpx;
				font-weight: bold;
				color: #231815;
				margin-top: 32rpx;
				margin-bottom: 8rpx;
				margin-left: 8rpx;
			}

			.tips {
				font-size: 20rpx;
				font-weight: 400;
				color: #666666;
				margin-bottom: 8rpx;
				margin-left: 8rpx;
			}

			.btn {
				width: 120rpx;
				height: 48rpx;
				background: linear-gradient(90deg, #FCE5C7 0%, #FAC500 100%);
				border-radius: 24rpx;
				border: 3rpx solid #231815;
				font-size: 24rpx;
				font-weight: bold;
				color: #231815;
				position: absolute;
				right: 30rpx;
				top: 21rpx;
			}
		}
	}
}
</style>
